<script>
import { getProList } from '@/api/pro'

import ExportJsonExcel from 'js-export-excel'

export default {
  data () {
    return {
      tableData: []
    }
  },
  mounted () {
    getProList().then(res => {
      // console.log(res.data);
      this.tableData = res.data
    })
  },
  methods: {
    exportClick () {
      // 1. 创建导出对象
      // 文件配置
      let option = {}
      // 2. 配置导出文件的名字
      option.fileName = 'proList'
      // 3. 配置需要导出的内容
      option.datas = [
        {
          // 需要导出的数据源
          sheetData: this.tableData,
          // 工作表名称
          sheetName: "工作表1",
          // 需要导出数据源中的哪些字段
          sheetFilter: ["brand", "category", 'desc', 'proname', 'originprice', 'img1'],
          // 这些被导出的字段标题叫什么
          sheetHeader: ["品牌", "分类", '描述', '商品名称', '产品价格', '产品图片'],
          // 导出后的宽度
          columnWidths: [5, 5, 10, 20, 30, 40],
        }
      ]

      // 4. 将内容创建成 excel
      let toExcel = new ExportJsonExcel(option)
      // 5. 保存 excel
      toExcel.saveExcel();
    }
  }
}
</script>
<template>
  <div>

    <!--
                                                      文件导出分两种方法
                                                      第一种：直接 a 标签即可
                                                      <a href="https://unpkg.com/vue@3/dist/vue.global.js">下载 vue</a>

                                                      第二种方法： 自己将数据处理后保存到本地
                                                     -->
    <el-button @click="exportClick">文件导出</el-button>

    <el-table :data="tableData">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="图片">
        <template #default="scope">
          <div>
            <el-image :src="scope.row.img1"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="category"></el-table-column>
      <el-table-column label="名称" prop="proname"></el-table-column>


    </el-table>
  </div>
</template>
<style scoped lang="scss">
.el-image {
  width: 100px;
}
</style>
